<template>
  <div class="relative overflow-hidden" :class="wrapperClass">
    <Skeleton
      v-show="!isLoaded"
      :class="[
        skeletonClass,
        'absolute inset-0 animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%]',
      ]"
    />
    <img
      :src="src"
      :alt="alt"
      :class="[imageClass, 'w-full object-cover', { 'opacity-0': !isLoaded }]"
      @load="handleImageLoad"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Skeleton } from '@/components/ui/skeleton'

const props = defineProps<{
  src: string
  alt?: string
  wrapperClass?: string
  imageClass?: string
  skeletonClass?: string
}>()

const isLoaded = ref(false)

const handleImageLoad = () => {
  isLoaded.value = true
}
</script>
